<template>
  <!--          create Employee dialogue     *************************************** -->
  <el-dialog
    :title="createEmployeeRemark.title"
    :visible="isVisible"
    :before-close="hide"
  >
    <el-form ref="createEmployeeValue" :model="createEmployeeValue" label-width="120px">
      <el-form-item :label="createEmployeeRemark.rolename">
        <el-select
          v-model="createEmployeeValue.rolename"
          :placeholder="createEmployeeRemark.rolenameOptions[0].label"
        >
          <el-option
            v-for="item in createEmployeeRemark.rolenameOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="createEmployeeRemark.username">
        <el-input v-model="createEmployeeValue.username" />
      </el-form-item>
      <el-form-item :label="createEmployeeRemark.age">
        <el-input v-model="createEmployeeValue.age" />
      </el-form-item>
      <el-form-item :label="createEmployeeRemark.sex">
        <el-input v-model="createEmployeeValue.sex" />
      </el-form-item>
      <el-form-item :label="createEmployeeRemark.phoneNumber">
        <el-input v-model="createEmployeeValue.phoneNumber" />
      </el-form-item>
      <el-form-item :label="createEmployeeRemark.identityNumber">
        <el-input v-model="createEmployeeValue.identityNumber" />
      </el-form-item>
      <el-form-item :label="createEmployeeRemark.birthdate">
        <el-col :span="11">
          <el-date-picker
            v-model="createEmployeeValue.birthdate"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createEmployee">创建</el-button>
        <el-button @click="hide">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  props: {
    isVisible: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      createEmployeeValue: {
        username: "",
        age: "",
        rolename: "",
        sex: "",
        phoneNumber: "",
        identityNumber: "",
        birthdate: "",
        url: "/basic/employee/add",
      },
      createEmployeeRemark: {
        username: "名字",
        age: "年龄",
        sex: "性别",
        phoneNumber: "电话号码",
        identityNumber: "身份证号码",
        birthdate: "生日",
        rolename: "身份角色",
        rolenameOptions: [
          {
            label: "经理",
            value: "Manager",
          },
          {
            label: "柜台",
            value: "Counter",
          },
          {
            label: "用户",
            value: "User",
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    createEmployee() {
    },
    hide() {
      this.$emit("hide");
    },
  },
};
</script>